<template>
  <div :style="{width, alignItems: labelAlign}"
       class="info">
    <div :style="{width: labelWidth, marginBottom: labelMarginBottom}"
         class="label">
      {{ label }}
    </div>
    <div :style="{alignItems: valueAlign}"
         class="value">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
withDefaults(defineProps<{
  label: string,
  width?: string,
  labelWidth?: string,
  labelMarginBottom?: string,
  labelAlign?: string,
  valueAlign?: string
}>(), {
  width: '100%',
  labelWidth: '50px',
  labelAlign: 'center',
  valueAlign: 'flex-start',
  labelMarginBottom: '0'
})
</script>

<style lang="less"
       scoped>
.info {
  display: flex;

  .label {
    color: #999999;
  }

  .value {
    color: #666666;
    flex-wrap: wrap;
    display: flex;
    flex: 1;
  }
}
</style>